<!--
 * 职责管理--人员视图
 * @author: hexiaozhen
 * @since: 2023-09-27
 * personView.vue
-->
<template>
  <a-modal
    v-model:visible="visibleModal"
    title="人员视图"
    title-align="start"
    width="600px"
    draggable
    :mask-closable="false"
    @cancel="handleCancel"
  >
    <a-table :columns="columns" :data="data" :pagination="false">
      <template #list="{ record }">
        <div v-for="(item, index) in record.list" :key="index" class="tl">
          <span>{{ index + 1 }}、</span>
          {{ item }}
        </div>
      </template>
    </a-table>
    <template #footer>
      <footer>
        <a-button @click="handleCancel">关闭</a-button>
      </footer>
    </template>
  </a-modal>
</template>

<script setup>
import { ref, onMounted, toRefs } from 'vue'
import system from '@/api/modules/system'
const props = defineProps({
  // 表单json配置项
  visible: {
    type: Boolean,
    default: false,
  },
  rowData: {
    type: Object,
    default: () => {
      return {
        type: '',
      }
    },
  },
})
const { visible, rowData } = toRefs(props)
const emit = defineEmits(['update:visible', 'submit'])
let visibleModal = ref(false) // 弹窗显示与隐藏
visibleModal.value = visible.value
// 关闭
const handleCancel = () => {
  visibleModal.value = false
  emit('update:visible', false)
}

const columns = [
  { title: '姓名', dataIndex: 'nickName', width: 160 },
  { title: '职责', slotName: 'list' },
]
let data = ref([])

//  数据字典
const getOption = () => {
  system.peopleViewDuty(rowData.value.deptId).then((res) => {
    data.value = res.data
  })
}

onMounted(() => {
  getOption()
})
</script>
